CSS

Curso Dalto de CSS

Basicos:

1. Estructura.

selector{
            propiedad: valor;
            }

2. Selectores.

<h1>Mi primer titulo editado en CSS</h1>
        <h2 class="titulo-h2">Mi primer h2 con CSS</h2>
        <h2 id="id-h2">Otro titulo h2</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
        <div>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing </p>
        </div>
/* Selector Universal */
        * {
            color: blue;
        }

        /* Selector de tipo (h1, parrafos, botones, inputs, etc */

        h1 {
            color: red;
        }
        p {
            color:aqua;
        }
        /* Selector por clases */
        .titulo-h2{
            color:bisque;
        }
        /* Selector por ID */
        #id-h2{
            background-color: red;
        }
        /* Selector por atributo, en este caso el atributo es creado */
        [rancio="siRancio"]{
            color: white;
            background-color: blue;
        }
        /* Por descendiente*/ 
        /* en este ejemplo seleccionamos a los elementos
        p que estan dentro de un div */
        div p{
            color:brown;
        }
        /*en este ejemplo seleccionamos a los p que estan dentro de un div
        pero son de la clase=parrafoEspecial
        Nota: para las clases se pone el elemento que contien a la clase y luego 
        la clase, o simplemente la clase*/
        div p.parrafoEspecial{ 
            color:black;
        }
        /* Selector por pseudoClases, como active, hover. Eventos de las selecciones */
        p:hover{
            background-color:red;
            color: black;
        }   

3. Especificidad.

4. Metodología BEM.

Modificador de Bloques de Elementos (del ingles Block Element Modifier BEM).BEM es una metodología que usaremos para nombrar y clasificar selectores CSS de manera estricta, transparente e informativa. más info

5. Unidades.

Más informacion en mozilla developer: más info

Unidad Nombre Equivale a.
cm Centímetros 1cm = 96px/2,54
mm Milímetros 1mm = 1/10 de 1cm
Q Cuartos de milímetros 1Q = 1/40 de 1cm
in Pulgada 1in = 2,54cm = 96px
pc Picas 1pc = 1/16 de 1in
pt Puntos 1pt = 1/72 de 1in
px Píxeles 1px = 1/96 de 1in

1 em por defecto es 16px

Unidad Relativa a
em Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como font-size, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como width.
ex Altura x de la fuente del elemento.
ch La medida de avance (ancho) del glifo "0" de la letra del elemento.
rem Tamaño de la letra del elemento raíz.
lh Altura de la línea del elemento.
vw 1% del ancho de la ventana gráfica.
vh 1% de la altura de la ventana gráfica.
vmin 1% de la dimensión más pequeña de la ventana gráfica.
vmax 1% de la dimensión más grande de la ventana gráfica.

6. Propiedades de Texto.

.contact-form__h1 {
            /* aqui 1 em es de 20px que es
            el tamaño que viene de la caja contenedora */

            /* tamaño */
            font-size: 2em;
            /* Tipo de letras */
            font-family: Georgia;
            /* Lo que ocupa la caja que contiene la letra, a lo alto */
            line-height: 1.5;
            /* El grosor de cada letra */
            font-weight: 400;
            
        }

Para más detalle u otras opciones en más info

7. Tipografías externas.

Para incluir tipografia diferentes se puede usar las de google. En la cabecera del HTML se incluye la tipografia y en CSS se llama a la seleccionada.

<link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
font-family: 'Redressed', cursive;

8. Normalize.

9. Cajas.

Nota: Utilizando la propiedad display se utiliza para cambiar el comportamiento, por ejemplo:

h2 {
            display: inline;
            height: 400px; /* A los elementos en linea no se aplica height */

10. Padding.

Es la distancia entre el texto y el borde de la caja, es una propiedad resumida, es decir, puedo resumir:

   padding: 10px 20px 30px 40px;
          /* top=10px derecha=20px 
            abajo= 30px e izquierda= 40px */

11. Widht y Height.

12. Box Sizing.

13. Margin.

14. Bordes.

Más información aqui

15. Box Model.

Drag Racing

16. Sombras.

/* Sintaxis:
        /* Keyword values */
        box-shadow: none;

        /* offset-x | offset-y | color */
        box-shadow: 60px -16px teal;

        /* offset-x | offset-y | blur-radius | color */
        box-shadow: 10px 5px 5px black;

        /* offset-x | offset-y | blur-radius | spread-radius | color */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

        /* inset | offset-x | offset-y | color */
        box-shadow: inset 5em 1em gold;

        /* Any number of shadows, separated by commas */
        box-shadow: 3px 3px red, -1em 0 0.4em olive;

        /* Global keywords */
        box-shadow: inherit;
        box-shadow: initial;
        box-shadow: unset;

17. Outline.

Es igual que el border, pero no es real, no ocupa espacio en el DOM. Es un shorthand, aqui más info.

/* style */
        outline: solid;

        /* color | style */
        outline: #f66 dashed;

        /* style | width */
        outline: inset thick;

        /* color | style | width */
        outline: green solid 3px;

18. Position.

Se utiliza para posicionar objetos en el DOM, y al posicionar el objeto adquiere cuatro (4) propiedades: Top, Right, left, botton y el Z-Index. más info

19. Position Static.

Es el valor por defecto y se considera que no esta posicionada.

20. Position Relative.

Se posiciona pero conserva su espacio en el DOM. Nota: Las propiedades TOP y LEFT son las más importantes y dominan a las otras dos (2)

21. Z Index.

Ordena los elementos en el eje Z, que es el eje de profundidad de la pantalla. A mayor el número mas adelante se muestra.

Nota: La recomendación es colocar los Z-Index es de 50 en 50 para poder ajustar elementos en medio, es decir, dar espacio para ajustar luego de crearlos.

Conflicto de hijos y padres del Z-Index:

La unica forma del que el hijo este abajo del padre, es que tenga z-index:-1 y el padre no tener z-index.

.contenedor{
            width:300px;
            height:300px;
            background:blue;
            margin: 80px;
            position: relative; 
        }
        .hijo {
            background:orange;
            width:120px;
            height:120px;
            position: relative;
            top: -20px;
            left: -20px;
            z-index: -1;
        }

21. Position Absolute.

Con el position absolute no reserva el espacio y el punto de referencia que se mueve es el contenedor o el viewport...En el relative, era desde su posicion inicial.

Nota: Al tener el absolute, el tamaño de la caja se ajusta al contenido, aunque el elemento sea block.

Toma de referencia el view port, a menos que el contenedor este posicionado y ahi, si se puede hacer referencia absoluta respecto al contenedor.

22. Position Fixed.

Igual que el absolute, pero se queda fijado. Utilizado para la publicidad, que queda fija pero lo demas cambia.

23. Position Sticky.

Es una mezcla entre relative y el fixed. Se reserva el espacio en el DOM y se define en que momento va ha estar fijo

CSS Intermedio:

25. Display.Para ir al inicio volver

26. Overflow.

Cuando un texto sobrepasa al contenedor, el overflow es la propiedad para tratar estos casos.

Esta propiedad es un shorthand, para más info de los valores, ejemplos y propiedades CSS relacionadas.

27. Float.

Es una propiedad de CSS que ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en linea aparecer a su costado. El elemento es removido del normal flujo de la pagina, aunque aún sigue siendo parte del flujo.

En la actualidad se utiliza para colocar texto de envuelva a la imagen, utilizado para articulos y blogs, para más info

28. Pseudoelementos.

Son elementos que no forman parre del DOM, pero si se ven los resultados, igual que el outline. Para más info y son elementos inline:

NOTA: Los pseudo-elementos que tienen la propiedad content no forman parte del DOM, como por ejemplo ::after y ::before, entonces no pueden ser seleccionadas.

29. Pseudoclases.

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector. Para más info y algunas pseudo-clases son:
* :hover.
* :link. Cambia las propiedades de un link que no hemos visitado. * :visited. Cambia las propiedades de un link que ya hemos visitado. * :lang()

30. Objet Fit.

La propiedad object-fit indoca como el contenido de un elemento externo, por ejemplo una imagen o un video, deberia redimensionarse para ajustarse a su contenedor...más info de los posibles valores:
* Contain.
* Cover.
* Fill.
* one.
* Scale-down.

31. Objet Position.

La propiedad object-position determina el alineamiento del elemento dentro de la caja., este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja.

/* left - Right - Top - Button */
        object-position: 10px;

        /* Puede ser px - em - % - etc */

32. Cursor.

La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento. Para ver los posibles valores más info.

33. Colorización (ColorName,Hex, RGB/A).

Hay varias formas de indicar los colores:
* Por el nombre. El navegador interpreta el color y coloca el color, pero hay diferencias entre navegadores. * RGB (Red-Rojo, Green-Verde, Blue-Azul). Las medidas van del cero(0) al 255, cero(0) es nada y 255 lo maximo.

/* Negro */
        background: rgb(0,0,0);
        /* Blanco */
        background: rgb(255,255,255);
        /* Rojo + Verde  = Amarillo una excepsion */
        background: rgb(255,255,0);
        
/* Negro */
        background: rgb(0,0,0,.2);
        /* Blanco */
        background: rgb(255,255,255,.3);
        /* Rojo + Verde  = Amarillo una excepsion */
        background: rgb(255,255,0,.5);
        

Puede estar en base a 3 digitos, por ejemplo: #000 seria el minimo o negro y #fff seria el blanco.
Puede estar en base a 6 digitos, por ejmplo: #000000 seria negro y #ffffff blanco y #ff0000 rojo puro.

34. Conceptos Básicos de Responsive.

Es adaptar la paguina a diferentes resoluciones, lo recomendado es hacer las paguinas Firts Mobile, es decir, diseñar primero para moviles y luego para mayores tamaños.

35. Menu Responsive.

36. Introducción a Flexbox.

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación

37. Conceptos de Flexbox.

El flexbox tiene dos ejes:

  1. Main Axis (Eje Principal). Esta controlado por la propiedad flex-direction.
  2. Cross Axis(Eje Cruzado). Va perpendicular al main axis.

38. Display Flex.

El contenedor flex: Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor display como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Las propiedades del contenedor flex son:
* flex-direction.
* flex-wrap.
* flex-flow. Es un shorthand de flex-direction y flex-wrap.

39. Flex direction.

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés). Valores:
* row. Valor por defecto y muestra los elementos en fila, comenzando de izquierda a derecha.
* row-reverse. Muestra los elementos en fila, pero empezando de derecha a izquierda.
* column. Muestra los elementos en columna de arriba hacia abajo.
* column-recerse. La dirección es de abajo hacia arriba.

40. Flex wrap.

La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos. Valores:
* nowrap. Valor por defecto.
* wrap.
* wrap-reverse.

Nota: Si le doy un widht:100%, los elementos se comportan como bloque.
Nota: Utlizando la propiedad min-width controlo el ancho minimo del contenedor.

41. Alineación en Flex.

Los flex-box tienen propiedades que controlan la alineación de las cajas y sus contenidos, y estas son:

La propiedad flex es un shorthand y son propiedades de los item flexibles. Hasta ahora hemos visto las propiedades del contenedor: más info

42. Flow Grow.

Reparte el espacio que sobra del contenedor y los reparte entre los los flex items si se lo asignamos a todos los item o podemos asignarle esta propiedad a un solo elemento.

43. Flex Basis.

Es como la propiedad width, pero es más importante, le da prioridad al flex-basis.

44. FLex Shrink.

La propiedad CSS flex-shrink especifica el factor de contracción de un flex item.

45. Order.

Es como el Z-index, pero en el eje que apunta el main axis.

46. Formulario con Flex.

Lucas hace una practica de crear un formulario utilizando flex-box. En esta guía, más Info , se muestran algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

47. Conceptos de Grid.

48. Display Grid.

49. Grid Templates.

50. Medidas especiales de Grid.

51. Grid Gap.

52. Asignación de espacios.

53. Repeat().

54. Grid Implícito y Explícito.

55. Grid Auto.Grid Dinámico.

56. Galería en Grid.

57. Grid Areas.

58. Nombrar Grid Lines.

59. Grid Shorthands.

60. Responsive Design.

61. Estructura Responsive Básica.

CSS Avanzado:

62. Transition.

63. Animaciones.

64. Cubic Bezier.

65. Transform.

66. Clip Path.

67. Background.

68. Variables.

69. Filtros.

70. Práctica con Filter.

71. Direction.

72. Letter Spacing.

73. Scroll Behavior.

74. User Selected.